{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>搜索框</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>搜索框基于<a href="#component/input-control">输入框</a>提供的 <code>.search-box</code> 外观开发了 JavaScript 增强功能，包括清除搜索按钮、延时监听搜索框文本更改事件等。</p></article>

















<section><header><h3>示例</h3></header><article><h4>简单使用</h4><p>直接在 <code>&lt;input&gt;</code> 上调用 <code>$().searchBox()</code> 方法来为一个普通的文本框启用搜索框增强功能。</p><div class="example">
  <div class="row">
    <div class="col-md-6">
      <input id="searchInputExample" autofocus="autofocus" type="search" class="form-control search-input search-example empty" placeholder="搜索">
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"searchInputExample"</span><span class="pln"> </span><span class="atn">autofocus</span><span class="pun">=</span><span class="atv">"autofocus"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"search"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control search-input"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"搜索"</span><span class="tag">&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#searchInputExample'</span><span class="pun">).</span><span class="pln">searchBox</span><span class="pun">({</span><span class="pln">
    escToClear</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 设置点击 ESC 键清空搜索框</span><span class="pln">
    onSearchChange</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">searchKey</span><span class="pun">,</span><span class="pln"> isEmpty</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'搜索框文本变更：'</span><span class="pun">,</span><span class="pln"> searchKey</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>配合输入框组件使用</h4><p>为 <code>.input-control</code> 添加 <code>.search-box</code> 类，为按钮添加 <code>.search-clear-btn</code> 来获得一个清除搜索框内容的触发按钮。</p><div class="example">
  <div class="row">
    <div class="col-md-6">
      <div class="input-control search-box search-box-circle has-icon-left has-icon-right search-example" id="searchboxExample">
        <input id="inputSearchExample1" type="search" class="form-control search-input empty" placeholder="搜索">
        <label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
        <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control search-box search-box-circle has-icon-left has-icon-right"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"searchboxExample"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputSearchExample1"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"search"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control search-input"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"搜索"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputSearchExample1"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-left search-icon"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-search"</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-right search-clear-btn"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-remove"</span><span class="tag">&gt;&lt;/i&gt;&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 初始化搜索框，并在选项中指定搜索文本变更事件回调函数，这样当搜索框文本发送变化时获得通知。</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchboxExample'</span><span class="pun">).</span><span class="pln">searchBox</span><span class="pun">({</span><span class="pln">
    escToClear</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 设置点击 ESC 键清空搜索框</span><span class="pln">
    onSearchChange</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">searchKey</span><span class="pun">,</span><span class="pln"> isEmpty</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'搜索框文本变更：'</span><span class="pun">,</span><span class="pln"> searchKey</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>配合输入组使用</h4><p>将 <code>.search-box</code> 放置在 <code>.input-group</code> 中。</p><div class="example">
  <div class="row">
    <div class="col-md-6">
      <div class="input-group">
        <div class="input-control search-box search-box-circle has-icon-left has-icon-right search-example" id="searchboxExample">
          <input id="inputSearchExample3" type="search" class="form-control search-input empty" placeholder="搜索">
          <label for="inputSearchExample3" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
        </div>
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button">搜索</button>
        </span>
      </div>
    </div>
    <div class="col-md-6">
      <div class="input-group">
        <div class="input-control search-box has-icon-left has-icon-right search-example" id="searchboxExample">
          <input id="inputSearchExample4" type="search" class="form-control search-input empty" placeholder="搜索">
          <label for="inputSearchExample4" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
        </div>
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button">搜索</button>
        </span>
      </div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control search-box search-box-circle has-icon-left has-icon-right search-example"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"searchboxExample"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inputSearchExample3"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"search"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control search-input"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"搜索"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"inputSearchExample3"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-control-icon-left search-icon"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-search"</span><span class="tag">&gt;&lt;/i&gt;&lt;/label&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-group-btn"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="tag">&gt;</span><span class="pln">搜索</span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>



<section><header><h3>选项</h3></header><article><p>除了使用 <code>onSearchChange</code> 来设置变更事件回调函数，还有更多的选项来定制搜索框。所有可用的选项包括：</p><div class="table-responsive"><table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th style="width: 100px;">选项</th>
      <th style="width: 100px;">名称</th>
      <th style="width: 50px;">默认值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>inputSelector</code></td>
      <td>搜索框 <code>input</code> 元素选择器</td>
      <td><code>'input[type="search"],input[type="text"]'</code></td>
      <td>当你的搜索框内有多个 input 元素时则可能需要设置此选项来指明哪个 input 作为搜索框的输入监听控件。</td>
    </tr>
    <tr>
      <td><code>listenEvent</code></td>
      <td>输入框监听事件</td>
      <td><code>'change input paste'</code></td>
      <td>如果你不需要在用户键入时获得通知，只需要将此选项值设置为 <code>'change paste'</code>。</td>
    </tr>
    <tr>
      <td><code>changeDelay</code></td>
      <td>监听事件触发延迟（毫秒）</td>
      <td><code>500</code></td>
      <td>当设置为 <code>500</code> 时，则只有输入框文本发生变更的过程中，只有超过 500 毫秒没有发生变化才触发 <code>onSearchChange</code> 事件；如果设置为 <code>0</code>，则只要文本框文本发生变更立即触发事件。</td>
    </tr>
    <tr>
      <td><code>escToClear</code></td>
      <td>是否启用按 <kbd>Esc</kbd> 键清除</td>
      <td><code>false</code></td>
      <td>如果设置为 <code>true</code>，则当用户激活输入框的时候按 <kbd>Esc</kbd> 立即清除已输入的文本。</td>
    </tr>
  </tbody>
</table></div></article></section>











<section><header><h3>方法</h3></header><article><h4><code>getSearch()</code></h4><p>获取搜索框内的文本。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取搜索框实例对象</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> mySearchBox </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.searchBox'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 获取搜索框内的文本</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> searchText </span><span class="pun">=</span><span class="pln"> mySearchBox</span><span class="pun">.</span><span class="pln">getSearch</span><span class="pun">();</span></code></pre><h4><code>setSearch(value)</code></h4><p>获取搜索框内的文本。</p><p>参数：</p><ul>
<li><code>value</code>：要设置的搜索框文本。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取搜索框实例对象</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> mySearchBox </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.searchBox'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 设置搜索框内的文本为 "search text"</span><span class="pln">
mySearchBox</span><span class="pun">.</span><span class="pln">setSearch</span><span class="pun">(</span><span class="str">'search text'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 清空搜索框</span><span class="pln">
mySearchBox</span><span class="pun">.</span><span class="pln">setSearch</span><span class="pun">(</span><span class="str">''</span><span class="pun">);</span></code></pre><h4><code>focus()</code></h4><p>激活搜索框。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取搜索框实例对象</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> mySearchBox </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.searchBox'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 激活搜索框</span><span class="pln">
mySearchBox</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">();</span></code></pre></article></section>


























<script>
function afterPageLoad(){
    $('.search-example').searchBox({
        escToClear: true,
        onSearchChange: function(searchKey, isEmpty) {
            console.log('Search box example: SearchKey', searchKey, isEmpty ? 'empty' : 'notEmpty');
        },
        onPressEnter: function() {
            console.log('ZUI - Searchbox: You press enter.');
        },
        onKeyDown: function() {
            console.log('ZUI - Searchbox: You press any key down.');
        },
        onFocus: function() {
            console.log('ZUI - Searchbox: Search box focus.');
        },
        onBlur: function() {
            console.log('ZUI - Searchbox: Search box blur.');
        }
    });
}
</script><section><header><h3>事件</h3></header><article><h4><code>onSearchChange</code></h4><p>当搜索框文本变更时触发。事件回调函数参数包括：</p><ul>
<li><code>searchText</code>：当前的搜索框文本；</li>
<li><code>isEmpty</code>：当前搜索框是否没有文本（文本为 <code>""</code>）。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 在初始化的时候设置事件回调函数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">searchBox</span><span class="pun">({</span><span class="pln">
    onSearchChange</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">searchBox</span><span class="pun">,</span><span class="pln"> isEmpty</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// 处理搜索框文本变更</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jquery 的 $().on() 方法监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'onSearchChange'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">,</span><span class="pln"> searchBox</span><span class="pun">,</span><span class="pln"> isEmpty</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// 处理搜索框文本变更</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4><code>onKeyDown</code></h4><p>当搜索框激活按下按键时触发。事件回调函数包括：</p><ul>
<li><code>event</code>：jQuery 事件对象。</li>
</ul><p>在事件回调函数内返回 <code>false</code>，可以取消默认的按键行为，相当于调用了 <code>event.preventDefault()</code>。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 在初始化的时候设置事件回调函数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">searchBox</span><span class="pun">({</span><span class="pln">
    onKeyDown</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// 处理按下按键事件</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">})</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jquery 的 $().on() 方法监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'onKeyDown'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">,</span><span class="pln"> event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// 处理按下按键事件</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4><code>onPressEnter</code></h4><p>当搜索框激活按下 <kbd>Enter</kbd> 键时触发。事件回调函数包括：</p><ul>
<li><code>event</code>：jQuery 事件对象。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 在初始化的时候设置事件回调函数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">searchBox</span><span class="pun">({</span><span class="pln">
    onPressEnter</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// 处理按下 Enter 键事件</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">})</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jquery 的 $().on() 方法监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'onPressEnter'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">,</span><span class="pln"> event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// 处理按下 Enter 键事件</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4><code>onFocus</code></h4><p>当搜索框激活获得焦点时触发。事件回调函数包括：</p><ul>
<li><code>event</code>：jQuery 事件对象。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 在初始化的时候设置事件回调函数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">searchBox</span><span class="pun">({</span><span class="pln">
    onFocus</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// 处理搜索框获得焦点事件</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">})</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jquery 的 $().on() 方法监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'onFocus'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">,</span><span class="pln"> event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// 处理搜索框获得焦点事件</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4><code>onBlur</code></h4><p>当搜索框激活失去焦点时触发。事件回调函数包括：</p><ul>
<li><code>event</code>：jQuery 事件对象。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 在初始化的时候设置事件回调函数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">searchBox</span><span class="pun">({</span><span class="pln">
    onBlur</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="com">// 处理搜索框失去焦点事件</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">})</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jquery 的 $().on() 方法监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#searchBox'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'onBlur'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">,</span><span class="pln"> event</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// 处理搜索框失去焦点事件</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section></div>
</section>
{/block}